<template>
	<div id="casedetail">
		<scroll-view :scroll-top="scrollTop" scroll-y="true"  @scroll="scrollFN"
					 class="scroll_viewd">
			<div class="casetop">
				<!-- <router-link  :to="{name:'Index',params:{actives:active}}"></router-link>-->
				<!--			<div class="back" v-show="headstatus || navFixed" @click="goback()">-->
				<!--				<img :src="constant.imgUrl +'design/caseback.png'" alt/>-->
				<!--			</div>-->
				<!-- a class="go_share" v-if="$util.shieldReview() && (headstatus || navFixed)" @click="goShare()">
					<img :src="constant.imgUrl +'common/share_icon.png'" alt/>
				</!-->
				<div class="person_showim">
					<img :src="`${cover_image}?x-oss-process=image/resize,m_fill,h_672,w_1125`" mode="widthFix" :lazy-load="true" />
				</div>
				<!-- 弹幕 -->
				<!--<div class="scroll">
					<img class="item_icon" :src="constant.imgUrl +'/common/horn_icon.png'" alt/>
					<ul class="new-list" id="con1" ref="con1" :class="{anim:animate==true}">
						<li v-for="(item,index) in scroll_data" :key="index">
							当前有
							<span class="text_main_com">{{item.num}}</span>
							人在关注此方案
						</li>
					</ul>
				</div>-->
				<div class="scroll" v-show="headstatus">
					<swiper class="swiper" id="con1" :autoplay="true" :interval="3000" duration="1000" :circular="true"
							:vertical="true" :skip-hidden-item-layout="true">
						<swiper-item v-for="(item,index) in scroll_data" :key="index" class="swiitem">
							<img class="item_icon" :src="constant.imgUrl +'/common/horn_icon.png'" alt :lazy-load="true" />
							当前有
							<span class="text_main_com">{{item.num}}</span>
							人在关注此方案
						</swiper-item>
					</swiper>
				</div>
			</div>
			<div class="casecontent">
				<div class="case_personal">
					<div class="person_left">
						<img :src="`${owner_user_picture}?x-oss-process=image/resize,m_fill,h_120,w_120`" alt class="person_user" :lazy-load="true"/>
						<div class="personuers">
							<p class="person_name">{{username}}</p>
							<p class="person_addres">
								{{address}}
								<span>│</span>
								{{rolename}}
							</p>
						</div>
					</div>
					<!--  <router-link :to="{name:'Index',params:{actives:active}}"> </router-link>-->
					<a class="person_right" @click="mainpage()">主页</a>

					<div class="personal_flow">
						<div class="userimg">
							<!--<img v-for="(item,index) in fans.data" :src="item.user_picture" alt class="imgs" v-if="index < 6" :Key="index"/>-->
							<img v-for="(item,index) in fans.data" :src="`${item.user_picture}?x-oss-process=image/resize,m_fill,h_78,w_78`" alt class="imgs" v-if = "index < 6 " :key="index" :lazy-load="true" />
							<img :src="constant.imgUrl +'design/more.png'" alt/>
						</div>
						<span class="browse">{{fans.total==undefined?'-':fans.total}}
                        <em class="brow">粉丝</em>
                        <em class="popularity">人气</em>
                    </span>
					</div>
					<div class="person_titles">
						<p class="case_title">{{casename}}</p>
					</div>
				</div>
				<ul class="peroson_home">
					<li>
						<p>户型</p>
						<p>{{room==''?'-':room}}</p>
					</li>
					<li>
						<p>面积</p>
						<p>{{acreage==''?'-':acreage}}</p>
					</li>
					<li>
						<p>造价</p>
						<p>{{price==''?'-':price}}</p>
					</li>
				</ul>
				<div class="nav_address">
					<p class="nav_area">
						小区
						<span>{{desicaddress}}</span>
					</p>
					<p class="distance" v-show="show_distance" @click="jumpmap(desicaddress)">
						<span class="dispan">距离你{{distance}}km</span>
					</p>
				</div>
				<div class="casedetanav">
					<div class="casedehead" :class="[navFixed ? 'navFixedIn' : 'navFixedOut']" id="casedehead">
						<!--<a v-for="(item ,index) in navlist" :href="item.id" :class="{'navsed':item.showbt?'navsed': '' }" @click="chosenav(index)"  >{{item.title}}</a>-->
						<div v-for="(item ,index) in navlist" :class="{'navsed':item.showbt?'navsed': '' }"
							 @click="chosenav(index, item.id,item.navb)" :key="item.id" :data-opt='item.id'
							 v-if="material_data.length>0">{{item.title}}
						</div>
						<div v-for="(item ,index) in navlists" :class="{'navsed':item.showbt?'navsed': '' }"
							 @click="chosenav(index, item.id,item.navb)" :key="item.id" :data-opt='item.id'
							 v-if="material_data.length==0">{{item.title}}
						</div>
					</div>
					<view class="swiper-box" :class="[navFixed ? 'list_nav' : 'list_navnormal']">
						<div class="navf" id="case1">
							<div class="navdesi">
								<p class="natitle">
									<span></span>3D全景
								</p>
							</div>
							<div class="caseD">
								<img :src="cover_image" alt class="linkdd" mode="widthFix" id="dds" :lazy-load="true"/>
								<div class="link">
									<div v-show="diablelink" @click="jumplink(linkto)" class="navto">3D全景</div>
									<div v-show="!diablelink" class="navto">3D全景</div>
								</div>
							</div>
						</div>
						<div class="navf" id="case2" :class="{'navFixedInMar': navFixed}">
							<div class="navdesi">
								<p class="natitle">
									<span></span>案例详情
								</p>
								<p class="navdescri">{{design_concept}}</p>
							</div>
							<div class="casedehome" v-if="bedroom_image">
								<p class="casede_title">户型图</p>
								<div class="homeimg">
									<img :src="bedroom_image" @click="previmg(bedroom_image)" mode="widthFix" :lazy-load="true"/>
								</div>
								<div class="navdesi">
									<!-- <p class="navdescri">户型图说明：利用台阶，制造高低层次分区效果，隔开办公区和影音区，增加整体空间感。本方案为现代时尚北欧风格，客餐厅大体上采用黑白灰色系，简洁、清爽。并运用白色文化砖与黑色格子壁纸产生强烈的对比。</p>-->
								</div>
							</div>
							<div class="casedehome" v-if="fengshui_picture">
								<p class="casede_title">风水图</p>
								<div class="homeimg">
									<img :src="fengshui_picture" @click="previmg(fengshui_picture)" mode="widthFix" :lazy-load="true"/>
								</div>
							</div>
							<div class="casedehome" v-for="(item,index) in room_data" :key="index">
								<p class="casede_title" :id="item.childroom">{{item.room_class_name}}</p>
								<div v-for="(items,indexTwo) in item.effect_image_list" :key="items.effect_id">
									<div class="keting">
										<img :id="'positionImg' + items.effect_id" :src="items.effect_img"
											 @click="previmg(items.effect_img,item,indexTwo)" mode="widthFix" :lazy-load="true"/>
									</div>
									<div class="navdesi">
										<p class="navdescri">{{items.effect_img_description}}</p>
									</div>
								</div>
							</div>
						</div>

						<div class="navf" id="case3">
							<div class="navdesi">
								<p class="natitle" v-if="material_data.length>0">
									<span></span>材料清单
								</p>
								<ul class="casematical">
									<li v-for="(item,index) in material_data" :key="index"
										v-if="material_data.length>0">
										<div class="matical_left">
											<img :src="item.material_image" alt :lazy-load="true"/>
										</div>
										<div class="matical_right">
											<p class="mati_name">{{item.material_name}}</p>
											<p class="mati_spe">{{item.material_spec}}</p>
											<p class="mati_price" v-if="false">
												单价:
												<span>¥{{item.material_price}}</span>
											</p>
										</div>
									</li>
								</ul>
								<p class="mati_price mat_total">
									装修价格:
									<span>¥{{total_price}}</span>
								</p>
							</div>
						</div>

					</view>
				</div>
			</div>
			<!--<option-btn v-if="isSelf && $util.shieldReview()" @toMaterialList="toMaterialList" @pushIteam="pushIteam"
						@popularize="goShare"/>-->
			<option-btn v-if="isSelf && $util.shieldReview()" @pushIteam="pushIteam"
									@popularize="goShare"/>
			<footer v-else>
				<v-normalFooter :isShowAttr="true" ref="normalFooter"></v-normalFooter>
			</footer>
			<!-- 预约参观 -->
			<!--<v-registerNow ref="registerNow" source="附近工地详情">
				<template>
					<div class="msk_desc">现在预约参观&nbsp;,&nbsp;还有机会砸金蛋</div>
					<div class="msk_desc">我们将与您确认方便的参观时间</div>
				</template>
			</v-registerNow>-->
			<uniPopup :show="catalog" position="bottom" class="catalog" type="bottom" maxHeight="1000rpx" ref="popups"
					  style="overflow-y: scroll">
				<div class="catalog_wrap" @click.stop>
					<p class="close_title">
						目录
						<img :src="constant.imgUrl +'design/addfriclose.png'" alt @click="closemask()" :lazy-load="true"/>
					</p>
					<div class="catalog_content">
						<div class="catalog_case" v-for="(item,index) in room_data" :key="index">
							<p class="catalog_title">{{item.room_class_name}}</p>
							<ul class="roomul">
								<li v-for="(items,indexs) in item.effect_image_list" :key="indexs" class="roomli">
									<!-- <a :href="'#positionImg' + items.effect_id" @click="closemask()">
										<img :src="items.effect_img" alt>
									</a>-->
									<div @click="linkroom(item.childroom)" class="roomimgbox">
										<img :src="items.effect_img" alt class="rooms_img" :lazy-load="true"/>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</uniPopup>
			<!-- div class="pageup">
				<img :src="constant.imgUrl +'design/Catalog.png'" alt @click="catalogshow()" :lazy-load="true"/>
				<img :src="constant.imgUrl +'design/sharewei.png'" alt v-show="hidefans" :lazy-load="true"/>
			</div> -->
			<!-- <uniPopup class="guide" maxHeight="1000rpx" ref="alertmask" @touchmove.stop.prevent="moveHandle">
				<div class="sharecontent">
					<div class="right_point" :class="{'isMiniapp' : isWxMiniBro}">
						<img :src="constant.imgUrl +'casedetail/icon_alertshare.png'" alt/>
					</div>
					<div class="sharemiddle">
						一键分享获客
						<img :src="constant.imgUrl +'casedetail/icon_guideshare.png'" alt/>
					</div>
					<div class="share_cancle" @click="cancleshare">好嘞~</div>
				</div>
			</uniPopup> -->
			<v-sharePoster ref="sharePoster" :type="2"></v-sharePoster>
		</scroll-view>
	</div>
</template>

<script>
import { mapGetters, mapState, mapActions } from 'vuex'
import { getcastdetail } from '@/api/case'
import { addCartNoShow } from '@/api/cart'
import { share } from '@/mixins'
import { sendShare, sendVisitors, shareStatisc } from '@/api/buriedPoint'
import { getRandomNum, isWxMiniapp } from '@/utils/common'
import uniPopup from '@/components/uni-popup/uni-popup.vue'
import NormalFooter from '@/pages/components/normalFooter'
import OptionBtn from '@/pages/components/optionBtn'
import SharePoster from '@/pages/components/sharePoster'
import { calcDistance } from '@/utils/common'
import { getbehavior } from '@/api/common'
/*	import RegisterNow from '@/pages/components/dialog/RegisterNow'*/
export default {
	name: 'casedetail',
	components: {
		uniPopup,
		'v-normalFooter': NormalFooter,
		'v-sharePoster': SharePoster,
		OptionBtn
		/* 'v-registerNow': RegisterNow,*/
	},
	mixins: [share],
	data() {
		return {
			constant: this.$constant,
			noticeList: [
				{ id: 1, num: 30 },
				{ id: 2, num: 50 },
				{ id: 3, num: 60 }
			],
			animate: false,
			sharePosterType: 2,
			isWxMiniBro: true,
			show_distance: true,
			navlist: [
				{ title: '3D全景', id: '#case1', showbt: true, navb: 'case1' },
				{ title: '案例详情', id: '#case2', showbt: false, navb: 'case2' },
				{ title: '材料清单', id: '#case3', showbt: false, navb: 'case3' }],
			navlists: [
				{ title: '3D全景', id: '#case1', showbt: true, navb: 'case1' },
				{ title: '案例详情', id: '#case2', showbt: false, navb: 'case2' }],
			catalog: false,
			showshare: false,
			weixinid: 'PG8858',
			active: 0,
			roleid: '',
			gobackt: '',
			caseid: '',
			detaillist: '',
			cover_image: '',
			owner_user_picture: '',
			view_num: '',
			share_num: '',
			fengshui: true,
			fengshui_picture: '',
			linkto: '',
			show_view: true,
			username: '',
			address: '',
			desicaddress: '',
			rolename: '',
			casename: '',
			room: '', // 房型
			acreage: '', // 面积
			price: '', // 价格
			design_concept: '', // 设计理念
			bedroom_image: '', // 户型图
			room_data: [], // 客厅，卧室等循环集合
			material_data: '', // 材料集合
			userid: '',
			nowlatitude: '',
			nowlongitude: '',
			getlatitude: '',
			getlongitude: '',
			distance: '',
			diablelink: true,
			owner_user_id: '',
			total_num: '',
			total_price: 0,
			fans: '',
			hidefans: false,
			scrollTop: 0,
			headstatus: true,
			navOffsetTop: 0,
			navFixed: false,
			orderstatus: true,
			scroll_data: [{ num: 20 }, { num: 80 }, { num: 55 }, { num: 32 }, { num: 15 }],
			scroll_option: {
				step: 1,
				limitMoveNum: 1,
				openWatch: true,
				waitTime: 500000000000000,
				direction: 0,
				singleHeight: 40
				// hoverStop: false,
			},
			toView: '',
			scrollheight: 20000,
			case_info: {},
			mainId: '',
			share_user_id: '',
			p_share_user_id: '',
			styleobject: {
				height: '2000px'
			},
			topheight: ''
		}
	},
	created() {
		// setInterval(this.scroll, 2000)
	},
	computed: {
		...mapGetters({ userInfo: 'getBasicUser' }),
		isSelf() {
			let selfUserId = uni.getStorageSync('user_id')
			return this.owner_user_id == selfUserId
		}
	},
	onLoad(options) {
		this.owner_user_id = options.owner_user_id
		this.caseid = options.case_id || options.caseid
		this.mainId = options.mainId
		this.share_user_id = options.share_user_id
		this.p_share_user_id = options.p_share_user_id

		const token = uni.getStorageSync('token') || null
		if (!token) {
			const returnUrl = `/pages/case/casedetail${this.commonJS.queryData(options)}`
			uni.navigateTo({
				url: `/pages/page/login/index?loginReturnUrl=${returnUrl}`
			})

			uni.setStorageSync('loginReturnUrl', returnUrl)
		}

		if (token) {
			this.getdetail()
			
			const selfUserId = uni.getStorageSync('user_id') || ''
			if (selfUserId == options.owner_user_id) return false
			const mobile = uni.getStorageSync('wxMobile') || ''
			addCartNoShow({
				mobile_phone: mobile,
				prebook_source: '立即咨询',
				owner_user_id: options.owner_user_id
			})
		}
	},
	onReady() {
		// this.distinguish(this.owner_user_id)
	},
	mounted() {
		var that = this
		// this.navOffsetTop = document.querySelector('.casedetanav').offsetTop + 30
		// 监听页面滚动高度
		// window.addEventListener('scroll', this.handleScroll)
		setInterval(function() {
			// that.scroll_data = []
			that.scroll_data.length = 5
			that.scroll_data.splice(0, 1)
			let randomNun = getRandomNum(5, 30)
			that.scroll_data.push({
				num: randomNun
			})
		}, 5000)
	},
	onShareAppMessage: function(options) {
		var owner_user_id = this.owner_user_id
		var puser_id = this.share_user_id
		var mainid = this.mainId
		let url = ''
		var userid = uni.getStorageSync('user_id')
		if (userid == owner_user_id) {
			url = `/pages/case/casedetail?owner_user_id=${this.owner_user_id}&caseid=${this.caseid}&share_user_id=${this.owner_user_id}&mainId=${mainid}`
		} else {
			url = `/pages/case/casedetail?owner_user_id=${this.owner_user_id}&caseid=${this.caseid}&share_user_id=${this.owner_user_id}&mainId=${mainid}&p_share_user_id=${puser_id}`
		}
		const shareObj = {
			title: this.casename,
			path: url
		}
		return shareObj
	},
	methods: {
		async scrollFN(e) {
			var dingbiao = await this.getDomInfo('.swiper-box')
			 this.casedehead = await this.getDomInfo('#casedehead')
			this.oldscrollTop = e.detail.scrollTop
			this.navFixed = e.detail.scrollTop > e.detail.scrollTop + dingbiao.top - dingbiao.height - this.casedehead.height
			// console.log(e.detail.scrollTop, this.casedehead.top)
			this.headstatus = this.casedehead.top > 50
		},
		goback() {
			// uni.navigateBack({
			// 	delta: 1
			// })
			let url = this.userInfo.role_id > 2 ? `/pages/design/designerIndex` : `/pages/design/designCompany/indexNew`
			uni.navigateTo({
				url: `${url}?owner_user_id=${this.userInfo.user_id}`
			})
		},
		scroll() {
			this.animate = true    // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
			setTimeout(() => {      //  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
				this.noticeList.push(this.noticeList[0])  // 将数组的第一个元素添加到数组的
				this.noticeList.shift()               // 删除数组的第一个元素
				this.animate = false  // margin-top 为0 的时候取消过渡动画，实现无缝滚动
			}, 5000)
		},
		// 图片预览
		previmg(item, imglist, index) {
			let imgs = []
			let imgindex = 0
			if (imglist) {
				let imgbox = imglist.effect_image_list
				imgbox.map((item) => {
					imgs.push(item.effect_img)
				})
				imgindex = index
			} else {
				imgs.push(item)
				imgindex = 0
			}
			uni.previewImage({
				urls: imgs,
				current: imgs[imgindex]
			})
		},
		jumplink(link) {
			uni.navigateTo({
				url: `/pages/page/webview/index?returnUrl=${link}`
			})
		},
		handleScroll() {
			var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
			var scroll = scrollTop - this.scrollTop
			this.scrollTop = scrollTop
			if (this.scrollTop == 0 || scroll < 0) {
				this.headstatus = true
			} else {
				this.headstatus = false
			}
			if (scrollTop > this.navOffsetTop) {
				this.navFixed = true
			} else if (scrollTop < this.navOffsetTop) {
				this.navFixed = false
			}
		},
		moveHandle(e) {
			event.stopPropagation()
			event.nativeEvent.stopImmediatePropagation()
		},
		// 朋友圈推广
		toMaterialList(data, type) {
			let params = {
				relevance_id: this.detaillist.case_info.case_id,
				case_article_id: this.detaillist.case_info.case_id,
				resource_type: 2,
				imgUrl: this.cover_image,
				cat_name: '',
				from: 'caseOrArticle',
				id: this.detaillist.case_info.case_id,
				images: this.cover_image,
				title: this.casename,
				extension_num: this.detaillist.case_info.extension_num,
				huoke_num: this.detaillist.case_info.huoke_num
			}
			uni.navigateTo({
				url: `/pages/getGuest/shareList${this.commonJS.queryData(params)}`
			})
		},
		// 推给团队
		pushIteam(data, type) {
			let params = {
				cat_name: '',
				imgUrl: this.cover_image,
				type: 2,
				from_origin: 1,
				id: this.detaillist.case_info.case_id,
				images: this.cover_image,
				title: this.casename,
				extension_num: this.detaillist.case_info.extension_num,
				huoke_num: this.detaillist.case_info.huoke_num
			}

			uni.navigateTo({
				url: `/pages/getGuest/pushTeam${this.commonJS.queryData(params)}`
			})
		},
		// 分享海报图
		async goShare() {
			let data = {
				id: this.detaillist.case_info.case_id
			}
			let resData = await this.$refs.sharePoster.showMask(data)
			if (typeof resData === 'string') { // 获取失败
				return false
			}
			let relevance_id = resData.relevance_id
			let userInfo = this.$store.state.user.user

			await getbehavior({
				traceType: 3,
				owner_user_id: this.owner_user_id,
				share_user_id: userInfo ? userInfo.user_id : 'null',
				multi_id: relevance_id,
				multi_type: 'case_detail'
			})
			await sendShare({ relevance_id, resource_type: 'case_detail' })
		},
		// 到主页
		mainpage() {
			uni.navigateTo({  // y营业时间编辑页面
				url: `/pages/design/designCompany/indexNew?owner_user_id=${this.owner_user_id}`
			})
		},
		// 导航点击
		chosenav(index, id, navb) {
			// var offest = document.getElementById(id)
			// console.log(navb)
			this.linkroom(navb)
			if (this.material_data.length > 0) {
				for (let i in this.navlist) {
					this.navlist[i].showbt = false
					this.navlist[index].showbt = true
				}
			} else {
				for (let j in this.navlists) {
					this.navlists[j].showbt = false
					this.navlists[index].showbt = true
				}
			}
		},
		async linkroom(id) {
			let ids = '#' + id
			this.toView = id
			let domInfo = await this.getDomInfo(ids)
			this.scrollTop = this.oldscrollTop || 0
			this.scrollTop += domInfo.top - 70
			this.$refs.popups.close()
		},
		getDomInfo(id, type) {
			return new Promise((resolve, reject) => {
				let query = uni.createSelectorQuery().in(this)
				query.select(id).boundingClientRect(data => {
					resolve(data)
				}).exec()
			})
		},
		// 案例详情数据
		getdetail() {
			var that = this
			var caseid = that.caseid
			// var url = '/apihkds/api/case/getdetail'
			var data = ''
			if ((caseid == '' || caseid == 'null') && (this.mainId !== '')) {
				data = {
					owner_user_id: this.owner_user_id,
					id: this.mainId
				}
			} else if ((this.mainId == '' || this.mainId == 'null') && (caseid !== '')) {
				data = {
					case_relevance_id: caseid,
					owner_user_id: this.owner_user_id
				}
			} else if ((this.mainId !== '') && (caseid !== '')) {
				data = {
					owner_user_id: this.owner_user_id,
					id: this.mainId,
					case_relevance_id: caseid
				}
			}
			/* data = {
							owner_user_id: 20,
							id: this.mainId,
							case_relevance_id: caseid
						}*/
			getcastdetail(data).then(response => {
				if (response.status == 'success') {
					var detaillist = response.data
					that.detaillist = detaillist
					that.case_info = detaillist.case_info
					that.case_info.name = detaillist.owner_user_info.owner_user_name
					// that.case_info.case_id = that.$route.query.caseid
					that.cover_image = detaillist.case_info.cover_image
					that.linkto = detaillist.case_info.case_3d_link
					that.owner_user_picture = detaillist.owner_user_info.owner_user_picture
					that.getlatitude = detaillist.community_info.latitude
					that.getlongitude = detaillist.community_info.longitude
					that.username = detaillist.owner_user_info.owner_user_name
					that.address = detaillist.owner_user_info.owner_user_region_name
					that.desicaddress = detaillist.community_info.community_name
					that.rolename = detaillist.owner_user_info.owner_user_role_name
					that.casename = detaillist.case_info.case_name
					that.room = detaillist.case_info.room
					that.acreage = detaillist.case_info.acreage
					that.price = detaillist.case_info.price
					that.fans = detaillist.fans_data
					that.design_concept = detaillist.case_info.design_concept
					that.bedroom_image = detaillist.bedroom_info.bedroom_image
					that.room_data = detaillist.effect_image_data.room_data
					let roomchild = detaillist.effect_image_data.room_data
					roomchild.forEach((item, index) => {
						that.room_data[index].childroom = 'childroom' + index
					})
					that.material_data = detaillist.material_data.list
					that.total_num = detaillist.material_data.total_num
					that.total_price = detaillist.material_data.total_price
					that.roleid = detaillist.owner_user_info.owner_user_role_id
					let langu = {
						lat: detaillist.community_info.latitude,
						lng: detaillist.community_info.longitude
					}
					setTimeout(function() {
						that.distance = calcDistance(langu)
					}, 1000)
					var fengshui = detaillist.bedroom_info.bedroom_fengshui_image
					if (that.linkto == '') {
						that.diablelink = false
					} else {
						that.diablelink = true
					}
					if (fengshui == '') {
						that.fengshui = false
					} else {
						that.fengshui = true
						that.fengshui_picture = fengshui
					}
					if (that.gobackt == 'normal') {
						that.show_view = true
						that.view_num = detaillist.case_relevance_info ? detaillist.case_relevance_info.view_num : 0
						that.share_num = detaillist.case_relevance_info ? detaillist.case_relevance_info.share_num : 0
					} else if (this.gobackt == 'editadcase' || this.gobackt == 'edittechongy') {
						that.show_view = false
					}
					this.togimg(that.cover_image)
					// #ifdef  H5
					this.share()
					// #endif
					this.sendtranck()
					uni.hideLoading()
				} else {
					that.diablelink = true
					uni.showToast(response.errors.message)
					uni.hideLoading()
				}
			})
		},
		togimg(cover_image) {
			let that = this
			if (cover_image) {
				uni.getImageInfo({
					src: cover_image,
					success: function(res) {
						let width = res.width
						let height = res.height
						that.topheight = (375 / width) * height + 300
					}
				})
			} else {
				that.topheight = 450
			}
		},
		jumpmap(address) {
			uni.openLocation({
				latitude: this.getlatitude * 1,
				longitude: this.getlongitude * 1,
				name: address,
				address: ''
			})
		},
		share() {
			var url = ''
			var imgurl = this.cover_image
			var owner_user_id = this.owner_user_id
			var puser_id = this.share_user_id
			var mainid = this.mainId
			var title = ''
			var desc = ''
			var userid = localStorage.getItem('user_id')
			if (userid == owner_user_id) {
				url = `/pages/design/designCompany/indexNew?owner_user_id=${this.owner_user_id}&caseid=${this.caseid}&share_user_id=${this.owner_user_id}&mainId=${mainid}`
				// url = location.protocol + '//' + location.host + '/hkds/#' + links + '?owner_user_id=' + this.owner_user_id + '&' + 'caseid=' + this.caseid + '&' + 'gobackt=' + this.gobackt + '&' + 'share_user_id=' + this.owner_user_id + '&' + 'mainId=' + mainid
			} else {
				url = `/pages/design/designCompany/indexNew?owner_user_id=${this.owner_user_id}&caseid=${this.caseid}&share_user_id=${this.owner_user_id}&mainId=${mainid}&p_share_user_id=${puser_id}`
				// url = location.protocol + '//' + location.host + '/hkds/#' + links + '?owner_user_id=' + this.owner_user_id + '&' + 'caseid=' + this.caseid + '&' + 'gobackt=' + this.gobackt + '&' + 'share_user_id=' + userid + '&' + 'p_share_user_id=' + puser_id + '&' + 'mainId=' + mainid
			}
			title = this.casename
			desc = this.design_concept
			let params = {
				title: title, // 分享标题
				desc: desc, // 分享内容
				imgUrl: imgurl,
				pagePath: url,
				owner_user_id: this.owner_user_id,
				puser_id: this.owner_user_id
			}
			this.jweixinFn(params)
		},
		sendtranck() {
			const owner_user_id = this.owner_user_id
			const puser_id = this.share_user_id
			const imgurl = this.cover_image
			const userid = uni.getStorageSync('user_id')
			const caseid = this.caseid
			let multi_type = ''
			let multi_id = ''
			if ((caseid == '' || caseid == 'null') && (this.mainId !== '')) {
				multi_type = 'p_case_detail'
				multi_id = this.mainId
			} else {
				multi_type = 'case_detail'
				multi_id = this.caseid
			}
			let data = {
				owner_user_id: owner_user_id,
				share_user_id: '',
				path: 'apihkds/api/case/getdetail',
				referer: 'pages/case/casedetail',
				traceType: 1,
				multi_type: multi_type,
				multi_id: multi_id,
				title: this.casename,
				picture: imgurl
			}
			getbehavior(data).then((res) => {
				if (res.status === 'success') {

				} else {

				}
			})
		},
		catalogshow() {
			// 目录点击
			this.$refs.popups.open()
			// this.catalog = trueclose_title
		},
		closemask() {
			// this.catalog = false
			this.$refs.popups.close()
		},

		distinguish(owner_user_id) {
			// 判断引导层是否显示
			// var userid = localStorage.getItem('user_id')
			let userid = uni.getStorageSync('user_id')
			let sharetatus = uni.getStorageSync('caseshre')
			if ((userid == owner_user_id) || (sharetatus == 'owender')) {
				/* if (!sharetatus) {
								this.$refs.alertmask.open()
								// this.showshare = true
							} else if (sharetatus == 'owender') {
								// this.showshare = false
								this.$refs.alertmask.close()
							}*/
				this.$refs.alertmask.close()
			} else {
				this.$refs.alertmask.open()
			}
		},
		cancleshare() {
			this.$refs.alertmask.close()
			// localStorage.setItem('caseshre', 'owender')
			uni.setStorageSync('caseshre', 'owender')
		}
	}
}
</script>

<style scoped lang="scss">
	#casedetail {
		height: auto;
		overflow-y: initial;
		background-color: #fff;
	}

	.casetop {
		width: 100%;
	}

	.person_showim {
		width: 100%;
	}

	.person_showim img {
		width: 100%;
	}

	.casetop .back {
		width: 60px;
		height: 60px;
		position: fixed;
		left: 5%;
		top: 25px;
		opacity: .7;
		float: left;
		z-index: 99;
	}

	.casetop .back img {
		width: 60px;
		height: 60px;
		float: left;
	}

	.casetop .go_share {
		top: 25px;
	}

	.go_share {
		width: 60px;
		height: 60px;
		position: fixed;
		right: 5%;
		top: 54px;
		opacity: 0.7;
		float: right;
		z-index: 99;
	}

	.go_share img {
		width: 60px;
		height: 60px;
		float: right;
	}

	.text_main_com {
		color: #ffd11a;
		padding: 0 10px;
	}

	.casecontent {
		width: 100%;
		height: auto;
		float: left;
	}

	.case_personal {
		margin-left: 40px;
		margin-top: 38px;
		width: auto;
		height: auto;
	}

	.casecontent .personal_flow {
		margin-left: 0;
		margin-top: 40px;
		background: #f4f4f4;
		/* border: 2px solid #cccccc; */
	}

	.person_left {
		float: left;
		display: flex;
	}

	.person_user {
		float: left;
		width: 80px;
		height: 80px;
		border-radius: 50%;
		background: #cccccc;
	}

	.personuers {
		float: left;
		margin-left: 20px;
		margin-top: 10px;
	}

	.personuers .person_name {
		font-size: 30px;
	}

	.personuers .person_addres {
		color: rgb(153, 153, 153);
		font-size: 24px;
		margin-top: 10px;
	}

	.person_right {
		float: right;
		width: 130px;
		height: 60px;
		background: rgb(255, 209, 26);
		border-radius: 30px;
		text-align: center;
		line-height: 60px;
		margin-right: 40px;
		margin-top: 15px;
	}

	.person_titles {
		width: 90%;
		height: auto;
		float: left;
		margin-top: 45px;
	}

	.case_title {
		font-size: 40px;
		text-align: left;
		font-weight: bold;
		line-height: 60px;
	}

	.casecontent .personal_flow {
		margin-left: 0;
		margin-top: 40px;
		background: #f4f4f4;
		/* border: 2px solid #cccccc; */
	}

	.personal_flow {
		width: 670px;
		height: 100px;
		float: left;
		margin-left: 40px;
		margin-top: 20px;
		background: #ffffff;
		border-radius: 50px;
		line-height: 100px;
	}

	.userimg {
		float: left;
		width: auto;
		height: 50px;
		margin: 25px 25px 0 40px;
		width: 66%;
	}

	.userimg img {
		width: 50px;
		height: 50px;
		float: left;
		border-radius: 50%;
		margin-left: 10px;
		border: 1px solid #cccccc; /*no*/
	}

	.userimg img:nth-child(1) {
		z-index: 4;
		margin-left: 0;
	}

	.browse {
		float: left;
		margin-left:20px;
		font-weight: bold;
		font-size: 36px;
	}

	.browse em {
		font-size: 24px;
		color: #999999;
		font-weight: normal;
		display: inline;
		margin-left: 5px;
	}

	.browse .popularity {
		display: none;
	}

	.person_look {
		height: 35px;
		line-height: 35px;
		margin-top: 24px;
	}

	.person_look span {
		color: rgb(153, 153, 153);
		line-height: 35px;
		font-size: 24px;
		float: left;
	}

	.person_look span img {
		float: left;
		width: 35px;
		height: 35px;
		margin-right: 10px;
	}

	.person_look span:nth-child(2) {
		margin-left: 40px;
	}

	.peroson_home {
		width: 100%;
		height: 80px;
		float: left;
		margin-top: 60px;
		padding-bottom: 40px;
		background-color: #fff;
	}

	.peroson_home li {
		width: 32.22%;
		height: 80px;
		float: left;
		border-right: 1px solid rgb(229, 229, 229); /*no*/
		text-align: center;
	}

	.peroson_home li:nth-child(3) {
		border: none;
	}

	.peroson_home li p:first-child {
		font-size: 24px;
		color: rgb(153, 153, 153);
	}

	.peroson_home li p:nth-child(2) {
		font-size: 30px;
		margin-top: 15px;
	}

	.nav_address {
		width: 100%;
		height: 90px;
		float: left;
		/* margin-top: 40px; */
		border-top: 1px solid rgb(221, 221, 221); /*no*/
		line-height: 90px;
		font-size: 30px;
		border-bottom: 20px solid #f5f5f5;
		background-color: #fff;

		p {
			line-height: 90px;
			font-size: 30px;
		}
	}

	.nav_area {
		float: left;
		margin-left: 40px;
		color: rgb(153, 153, 153);
	}

	.nav_area span {
		color: black;
		margin-left: 20px;
	}

	.distance {
		float: right;
		margin-right: 40px;
		color: rgb(255, 108, 0);
		background: url($imgUrl+ 'login/right.png') right center;
		background-repeat: no-repeat;
		background-size: 15px 28px;
	}

	.distance .dispan {
		float: right;
		margin-right: 20px;
	}

	.casedetanav {
		width: 100%;
		height: auto;
		float: left;
		/* margin-top: 20px; */
	}

	.casedehead {
		width: 100%;
		height: 90px;
		line-height: 90px;
		color: #666;
		border-bottom: 1px solid rgb(221, 221, 221); /*no*/
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
	}

	/* .casedehead a{width:33.33%;height:90px;float: left;text-align: center;} */
	.casedehead > div {
		width: 25%;
		height: 90px;
		/* float: left; */
		text-align: center;
		line-height: 80px;
		font-size: 30px;
	}

	.link {
		position: absolute;
		left: 0;
		margin: 20px;
		top: 0;
		bottom: 0;
		right: 0;
	}

	.navsed {
		background-image: url($imgUrl+ 'design/tabline.png');
		background-repeat: no-repeat;
		background-size: 60px 6px;
		background-position: 50% 100%;
		font-weight: bold;
		color: #333;
	}

	.navFixedIn {
		position: fixed;
		top: 0;
		left: 0;
		-webkit-animation-name: fadeIn; /*动画名称*/
		-webkit-animation-duration: 0.4s; /*动画持续时间*/
		-webkit-animation-iteration-count: 1; /*动画次数*/
		-webkit-animation-fill-mode: forwards;
		z-index: 1;
		background-color: #fff;
	}

	@keyframes fadeIn {
		0% {
			opacity: 0;
		}
		50% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}

	@-webkit-keyframes fadeIn {
		0% {
			opacity: 0;
		}
		50% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}

	.navdesi {
		height: auto;
		margin-left: 20px;
		margin-top:20px;
		margin-right:10px;
	}

	.natitle {
		font-size: 30px;
		height: 34px;
		line-height: 34px;
	}

	.natitle span {
		float: left;
		width: 10px;
		height: 34px;
		border-radius: 2px;
		margin-right: 5px;
		background: -webkit-linear-gradient(rgb(255, 144, 0), rgb(255, 209, 26));
	}

	.navdescri {
		line-height: 36px;
		margin-top: 27px;
		word-break:normal;
		margin-right:10px;
		margin-left:10px;
		margin-bottom: 10px;
	}

	.casedehome {
	}

	.casede_title {
		text-align: center;
		font-size: 30px;
		font-weight: bold;
		margin-top:40px;
	}

	.homeimg {
		width: 100%;
		height: auto;
		margin-top: 29px;
		background: #cccccc;
	}

	.homeimg img {
		width: 100%;
		height: auto;
		float: left;
		margin-top: 10px;
	}

	.keting {
		background: #cccccc;
		margin: 20px;
	}

	.keting img {
		width: 100%;
		height: auto;
		float: left;
		margin-bottom:30px;
	}

	.caseD {
		height: auto;
		background-size: 100% 100%;
		margin: 20px;
		position: relative;
	}

	.linkdd {
		width: 100%;
		height: auto;
		position: relative;
	}

	.caseD .navto {
		height: 60px;
		width: 160px;
		border-radius: 45px;
		position: relative;
		background: black;
		opacity: .9;
		text-align: center;
		text-indent:-20px;
		line-height: 60px;
		color: white;
		font-size: 28px;
		left: 50%;
		top: 50%;
		margin-left: -80px;
		margin-top: -30px;
		background-image: url($imgUrl+ '/design/3D.png');
		background-repeat: no-repeat;
		background-size: 12px 16px;
		background-position: 90% 50%;
	}

	.navf {
		width: 100%;
		height: auto;
		float: left;
		background-color: #fff;
		border-top: 20px solid #f5f5f5;
		padding-bottom: 40px;
	}

	#case3 {
		margin-bottom: 140px;
	}

	.casematical {
		width: 100%;
		height: auto;
		margin-top: 20px;
		border-bottom: 1px solid #cccccc; /*no*/
		float: left;
	}

	.casematical li {
		width: 100%;
		height: 220px;
		margin-top: 15px;
		float: left;
		position: relative;
	}

	.matical_left {
		width: 210px;
		height: 210px;
		float: left;
	}

	.matical_left img {
		width: 100%;
		height: 100%;
		float: left;
	}

	.matical_right {
		float: left;
		width: 434px;
		height: 210px;
		margin-left: 10px;
	}

	.mati_name {
		font-size: 34px;
		font-weight: bold;
		line-height: 42px;
		display: -webkit-box;
		word-break: break-all;
		-webkit-line-clamp: 2;
		/*! autoprefixer: off */
		-webkit-box-orient: vertical;
		/* autoprefixer: on */
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.mati_spe {
		font-size: 24px;
		margin-top: 36px;
		color: rgb(153, 153, 153);
	}

	.mati_price {
		font-size: 24px;
		color: rgb(102, 102, 102);
		margin-top: 24px;
		position: absolute;
		bottom: 10px;
	}

	.mati_price span {
		color: rgb(255, 102, 0);
		font-size: 30px;
	}

	.mat_total {
		float: right;
		position: relative;
	}

	.catalog_content {
		/* width: 100%; */
		height: calc(100% - 100px);
		float: left;
		margin-left: 40px;
		overflow-y: auto;
		margin-top: 100px;
	}

	.catalog_case {
		width: 100%;
		height: auto;
		float: left;
	}

	.catalog_title {
		font-size: 40px;
		text-align: left;
		margin-bottom: 20px;
	}

	.catalog_case .roomul {
		width: 100%;
		height: auto;
		float: left;
		margin-bottom: 45px;
	}

	.catalog_case .roomli {
		width: 213px;
		height: 204px;
		float: left;
		margin-top: 10px;
		margin-left: 25px;
	}

	.catalog_case .roomli:nth-child(3n+1) {
		margin-left: 0
	}

	.catalog_case .roomli .roomimgbox {
		width: 100%;
		height: 100%;
		float: left;
	}

	.catalog_case .roomli .roomimgbox .rooms_img {
		width: 100%;
		height: 100%;
		float: left;
	}

	.foter_icon {
		width: 34px;
		height: 34px;
		position: absolute;
		text-align: center;
		line-height: 34px;
		border-radius: 50%;
		background: -webkit-linear-gradient(rgb(255, 4, 0), rgb(255, 58, 123));
		font-size: 22px;
		float: left;
		left: 100%;
		color: white;
	}

	.pageup {
		width: 100px;
		position: fixed;
		right: 5%;
		bottom: 150px;
		opacity: .9;
	}

	.pageup img {
		width: 100px;
		height: 100px;
		float: left;
	}

	.pageup img:nth-child(2) {
		margin-top: 30px;
	}

	.scroll {
		top: 20px;
		left: 25%;
		width: 390px;
		height: 60px;
		opacity: 0.8;
		border-radius: 50px;
		position: fixed;
		overflow: hidden;
		border: 1px solid black;
		background: rgba(0, 0, 0, 1);

		.item_icon {
			float: left;
			width: 40px;
			height: 34px;
			margin-top: 4%;
			margin-left:20px;
			margin-right: 10px;
		}
	}

	.swiper {
		height: 60px;
		width: 100%;
	}

	.new-list {
		margin-left: 12%;
	}

	#con1 li {
		line-height: 60px;
		height: 60px;
		position: absolute;
		z-index: 999;
		color: white;
		display: inline-block;
		white-space: nowrap;
		animation: 3s wordsLoop linear infinite normal;
	}

	.swiitem {
		line-height: 60px;
		height: 60px;
		position: absolute;
		z-index: 999;
		color: white;
		display: inline-block;
		white-space: nowrap;
	}

	/*.anim {
		transition: all 1s;
		margin-top: -60px;
	}*/

	.catalog {
		.catalog_wrap {
			height: 1000px;
			overflow: scroll;
			width: 750px;
			background: white;
		}

		bottom: 10%;

		.close_title {
			width: 100%;
			height: 100px;
			text-align: center;
			/* margin: 25px 0; */
			font-size: 34px;
			line-height: 100px;
			position: fixed;
			background: white;

			img {
				float: right;
				width: 40px;
				height: 40px;
				margin-right: 40px;
				margin-top: 30px;
			}
		}

		.catalog_title {
			font-size: 40px;
			text-align: left;
			text-indent: 20px;
			margin-bottom: 20px;
		}
	}

	.casede_fooetr {
		display: flex;
		// align-items: center
		.v_coantaion {
			width: 80%;

		}

		.v_onlineSign {

		}
	}

	#casedetail .catalog /deep/ .uni-popup__wrapper {
		background: white;
	}

	#casedetail .guide /deep/ .uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {
		width: 100%;
		height: 100%;
		max-width: 96%;
		min-height: 100%;
		background: none;
	}

	.sharecontent {
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		position: fixed;
		z-index: 9999;
	}

	.right_point.isMiniapp {
		margin-right: 124px;
	}

	.right_point {
		float: right;
		width: 96px;
		height: 190px;
		margin-right: 64px;
		margin-top: 15px;
	}

	.right_point img {
		width: 100%;
		height: 100%;
		float: left;
	}

	.sharemiddle {
		width: 100%;
		height: auto;
		margin-top: 276px;
		font-size: 48px;
		text-align: center;
		color: white;
	}

	.sharemiddle img {
		width: 243px;
		height: 333px;
		display: block;
		margin: 0 auto;
		margin-top: 57px;
	}

	.share_cancle {
		width: 200px;
		height: 90px;
		border-radius: 45px;
		margin: 0 auto;
		color: white;
		text-align: center;
		line-height: 90px;
		font-size: 32px;
		margin-top: 70px;
		border: 2px solid white;
	}

	.swiper-box {
		/*flex: 1;
		width: 100%;
		height: calc(100% - 100px);*/
	}

	.scroll_view {
		height: 1500px;
		overflow-y: scroll;
	}

	.scroll_viewd {
		height: 100vh;
	}

	/*
        .catalog_case {
            margin-bottom: 80px;
        }*/

	.rooms_img {
		width: 100%;
		height: 300px;
	}

	.list_nav {
		margin-top: 89px;
	}

	@keyframes wordsLoop {
		0% {
			transform: translateY(0px);
			-webkit-transform: translateY(60px);
		}
		100% {
			transform: translateY(-100%);
			-webkit-transform: translateY(-100%);
		}
	}

	@-webkit-keyframes wordsLoop {
		0% {
			transform: translateY(0px);
			-webkit-transform: translateY(60px);
		}
		100% {
			transform: translateY(-100%);
			-webkit-transform: translateY(-100%);
		}
	}
</style>
